<template>
  <div class="componentBox">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

    <van-grid :border="false" :column-num="3" square route>
      <van-grid-item to="/NewsList">
        <img src="../assets/images/menu1.png">
        <p>新闻资讯</p>
      </van-grid-item>
      <van-grid-item to="/PicShare">
        <img src="../assets/images/menu2.png" />
        <p>图片分享</p>
      </van-grid-item>
      <van-grid-item to="/GoodsList">
        <img src="../assets/images/menu3.png" />
        <p>商品购买</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu4.png" />
        <p>留言反馈</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu5.png" />
        <p>视频专区</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu6.png" />
        <p>联系我们</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg"
      ]
    };
  },
  created() {
    this.$store.commit("getCarNum");
  }
};
</script>

<style lang="less" scoped>
.my-swipe {
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}


.van-grid-item {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: 12px 10px;
  background-color: #fff;
}

img {
  width: 60px;
}
p {
  font-size: 14px;
}

.van-swipe__track img {
  height: 100%;
  width: 100%;
}
</style>